<template>
  <div class="app-container">
    <div style="background-color: #fff; font-size:15px; color: #5A5A5A; border-radius: 10px; padding-bottom: 16px;">
        <TalentPersonSearchform :search-form="searchForm"
        :model-type="'talentPerson'" @searchFormEmit="searchFormEmit" />
    </div>
    <div v-loading="loading" class="table-2">
      <div v-if="CompanysList.length" style="padding: 0 10px; margin-bottom: 16px;">
        <el-row :gutter="10">
          <el-col :xs="10" :sm="8" :md="8" :lg="6" :xl="6" v-for="(item, index) in CompanysList" :key="index" style="margin-bottom: 10px;">    
            <div class="card" >
                <el-card :body-style="{  }" style="height: inherit">
              <router-link :to="{ path: '/talentPerson/info?id=' + item.Id }">
                <div style="display: flex; align-items: center;">
                  <el-avatar shape="square" :size="40"
                    :style="`background: ${extractColorByName(item.PerName)}; font-size: 2.2rem; min-width: 40px`">
                    {{ item.PerInitial }}
                  </el-avatar>
                  <div style="font-size: 17px;color: #404040; margin: 0 10px;white-space: nowrap;">{{ item.PerName }}</div>
                  <div style="font-size: 13px;">
                    <el-image style="width: 16px; height: 12px;margin-right:5px" :src="require('@/assets/idcard.png')"
                      fit="fill" />
                    <span style="color: #CFCFCF;">身份证号：</span>
                    {{ item.PerCard }}
                  </div>
                </div>
                <div style="display: flex; flex-wrap: wrap;margin: 8px 0 0 0px;">
                  <template v-for="(item2, index2) in item.PerTypes">
                    <el-tag size="small">
                      {{ item2.name }}
                    </el-tag>
                  </template>
                </div>
              </router-link>
              <div style="margin-top: 10px;">
                <span style="color: #ccc;font-size: 15px;margin-bottom: 6px;display: inline-block;">所在单位：</span>
                <div class="bottom clearfix">
                  <template v-for="(item3, index3) in item.ComNames">
                    <span style="display: inline-block; margin-bottom: 4px;font-size: 14px;"> {{ item3.ComName }}</span>
                    <br />
                  </template>
                </div>
              </div>
                </el-card>
            </div>
          </el-col>
        </el-row>
      </div>
      <div v-else style="background-color: #fff;"><el-empty description="暂无数据" /></div>
      <div style="background-color:#fff;border-radius: 0 0 10px 10px;">
        <pagination :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.pageSize"
          @pagination="getPageList()" />
      </div>
    </div>
  </div>
</template>
<script>
import { getPerCount, getPersons } from '@/api/person'
import Pagination from '@/components/BasicTable/Pagination.vue'
import { extractColorByName } from '@/utils'
import TalentPersonSearchform from '@/components/SearchForm/talentPersonSearchform.vue'
export default {
  name: 'TalentPerson',
  components: { Pagination, TalentPersonSearchform },
  data() {
    return {
      loading: false,
      searchForm: {
        region: true, //  开启地址
        reset: false, //  重置条件
        title: '筛选',
        fields: [
          {
            show: true,
            type: 'input',
            label: '企业名称',
            labelShow: true,
            name: 'comName'
          },
          {
            show: true,
            type: 'input',
            label: '姓名',
            labelShow: true,
            name: 'perName'
          },
          {
            show: true,
            type: 'input',
            label: '身份证号',
            labelShow: true,
            name: 'perCard'
          },
          {
            show: true,
            type: 'region',
            label: '所属区域',
            labelShow: true,
            name: 'distId',
            options: null
          },
          {
            show: true,
            type: 'cascade',
            label: '人员类别',
            labelShow: true,
            name: 'perTypeName',
            options: null
          }
        ]
      },
      tableData: null,
      total: 0, // 分页的总数，但是如果数量大于500，就最多可以看500条数据，页码控制到50页以内可以点击分页
      countcount: 0,
      maxPage: 50, // 最多显示多少页数制
      listQuery: {
        page: 1,
        pageSize: 12
      },
      CompanysList: [],
    }
  },
  methods: {
    async getComCountCount() {
      this.loading = true
      await getPerCount(this.listQuery).then(res => {
        this.loading = false
        if (res.code === 200) {
          this.countcount = res.data.count
          // 最多展示 this.maxPage 页数据
          this.total = Math.ceil(this.countcount / this.listQuery.pageSize) > this.maxPage ? this.listQuery.pageSize * this.maxPage : this.countcount
        }
      })
    },
    async getPageList(v) {
      this.loading = true
      this.listQuery = { ...this.listQuery, ...v ?? {} }
      getPersons(this.listQuery).then(async (res) => {
        this.loading = false
        if (res.code === 200) {
          // 再请求一下总数接口
          await this.getComCountCount()
          // 关于分页：全部/重置的时候，按照接口的总数分页，搜索的时候按照搜索的数据分（countcount根据搜索出来的数据变换）。
          this.CompanysList = res.data.pageList
        }
      })
    },
    searchFormEmit(v) {
      this.listQuery.page = 1
      this.listQuery = { ...this.listQuery, ...v }
      this.getPageList()
    },
    extractColorByName(name) {
      return extractColorByName(name)
    }
  }
}
</script>
<style lang="scss" scoped>
.el-row {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  display: flex;
  flex-wrap: wrap;
}

.el-col {
  flex: 0 0 auto;
  max-width: 100%;
  float: none;
  margin-bottom: 1rem;
}

.card {
  display: flex;
  position: relative;
  flex-direction: column;
  height: 100%;
  background-color: #fff;
  border-radius: 10px;
  border: 1px solid #f4f4f4;
}

.card:hover {
  box-shadow: 3px 3px 5px #eee;
}

.table-2 {
  border-radius: 10px;
  overflow: auto;
  background-color: #fff;
}

::v-deep .el-tabs__active-bar {
  height: 0 !important;
}

::v-deep .el-tabs__nav-wrap::after {
  height: 0 !important;
}

::v-deep .el-tabs__item.is-active {
  background-color: #EBF6FF;
  border-radius: 5px;
}

::v-deep .el-tabs--top .el-tabs__item.is-top {
  padding: 0 20px;
}

.hover-row {
  padding: 30px 30px 0 30px;
  border-radius: 10px;
  background-color: #F7F8FA;
}

.hover-row:hover {
  background-color: pink;
  cursor: pointer;
}

::v-deep .hover-row:hover .el-descriptions__body {
  background-color: #fafbfd;
}

.el-tag {
  margin-right: .5rem;
  margin-bottom: .5rem;
}
</style>
